<template>
  <!-- <div class="tree">-->
  <div class="tree-menu">
    <div :class="['menuLabel']" :style="indent">
      <span
        class="nodeMain"
        :class="['nodeMain', link === this.$route.path ? 'nodeMainSel ' : '']"
        @click="onClickNode"
      >
        <span v-if="icon && depth == 0" class="nodeHeader">
          <svg-icon :icon-class="icon" className="nodeIcon" />
          <!-- <i v-else :class="{ selPoint: nodeSelected }"> </i> -->
        </span>
        <span class="nodeLabel">
          <div v-if="link != ''">
            <router-link
              :to="{ path: link, query: { inEdit } }"
              class="nodeLableLink"
            >
              {{ label }}
            </router-link>
          </div>
          <div v-else>{{ label }}</div>
        </span>
      </span>
      <div class="nodeRightIcon">
        <span v-if="nodes && nodes.length">
          <i v-if="showChildren" class="el-icon-minus"></i>
          <i v-else class="el-icon-plus"></i>
        </span>
        <!-- 删除菜单上关闭按钮
          :class="{ lableSeled: nodeSelected }"
        <span v-else>
          <i
            class="el-icon-circle-close"
            v-show="nodeSelected"
            @click="onCloseView"
          />
        </span>-->
      </div>
    </div>

    <div v-show="showChildren">
      <tree-menu
        v-for="(node, index) in nodes"
        :key="index"
        :nodes="node.children"
        :label="node.meta.title"
        :icon="node.meta.icon"
        :link="node.meta.url"
        :inEdit="node.inEdit"
        :depth="depth + 1"
      ></tree-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: ['label', 'icon', 'nodes', 'link', 'depth', 'inEdit'],
  data: function () {
    return {
      showChildren: false,
      toggleIcon: 'el-icon-arrow-down',
      nodeSelected: false,
    };
  },
  methods: {
    onClickNode() {
      let _this = this;
      // console.log(this.$route.path);
      if (_this.nodes && _this.nodes.length != 0) {
        _this.showChildren = !_this.showChildren;
      } else {
        // _this.indent = 'background-color: rgba(255, 255, 255, 0.5);'
        // _this.selIcon = 'sel-point'
        // _this.hadOpen = 'el-icon-circle-close'
        _this.nodeSelected = true;
      }
    },
    onCloseView() {
      let _this = this;
      _this.nodeSelected = false;
    },
  },
  computed: {
    indent() {
      return {
        paddingLeft: this.depth * 30 + 'px',
        // transform: `translate(${this.depth * 20}px)`,
        // width: `calc(100% - ${this.depth * 20}px)`,
      };
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.menuLabel {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.nodeMain {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 5px;
  cursor: pointer;
  color: #2c3e50;
}
.nodeMainSel {
  font-weight: 500;
  border-radius: 5px;
  background-color: #ebeef5;
}
.nodeMainSel .nodeLabel .nodeLableLink {
  color: #0099f6;
  font-weight: 600;
}
.nodeLableLink {
  width: 100%;
  height: 100%;
  color: #2c3e50;
  text-decoration: none;
}
.nodeLabel {
  flex: 1;
  display: block;
  padding-top: 3px;
  font-size: 1em;
  white-space: normal;
  word-break: break-all;
  /* background-color: none; */
}

.nodeLabel:before {
  position: absolute;
  left: -10px;
  right: auto;
  border-width: 1px;
  content: '';
}
.nodeLabel::before {
  /*ebeef5*/
  bottom: 0px;
  height: 38px;
  top: -10px;
  width: 1px;
  border-left: 2px solid #dcdfe6;
}
.nodeLabel:after {
  position: absolute;
  left: -10px;
  right: auto;
  border-width: 1px;
  content: '';
}
.nodeLabel::after {
  height: 21px;
  top: 6px;
  width: 8px;
  border-bottom: 2px solid #dcdfe6;
}

.nodeIcon {
  font-size: 1.3em;
  /* color: black; */
  text-align: center;
}

/* .lableSeled {
  background-color: #ebeef5;
} */

.nodeHeader {
  min-width: 30px;
  text-align: center;
  /* color: black; */
  /* display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  */
}

.nodeRightIcon {
  display: inline-block;
  min-width: 25px;
}
/* .selPoint {
  display: inline-block;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background-color: black;
}
.colseOpenIcon {
  position: absolute;
  right: 5px;
} */

/*.nodeLabel .router-link-active {
  text-decoration: none;
  /* color: #606266;
  width: 100%;
}
*/

/* .nodeLabel >>> a {
  text-decoration: none;
  color: #606266;
  width: 100%;
  height: 100%;
  /* color: black;
} */

/* .nodeLabelSel {
  background-color: rgba(255, 255, 255, 0.5);
} */
</style>
